<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<base href="/webproject/day04/">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<!-- 360高速模式-->
		<meta name="description" content="bootstrap基本模板">
		<meta name="author" content="chengt01">
		<meta name="keywords" content="bootstrap,html5,css3">
		<title>index</title>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../styles/site.css"/>
		<!--[if lt IE 9]>
		<script src="../scripts/html5.min.js"></script>
		<script src="../scripts/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="container">

		<header class="page-header">
			<h1 class="text-capitalize">accodion</h1>
		</header>
		<div>
			<button type="button" class="btn btn-default"
			data-toggle="collapse"
			data-target="#divPanel">
				Show | Hide
			</button>
			<div id="divPanel" class="collapse well">
				<h3>Header</h3>
				<p>
					这是一个可折叠和展开的面板
				</p>
			</div>
			<div class="panel-group" id="accordion">
				<div class="panel panel-default">
					<div class="panel-heading">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 计算机类 </a>
					</div>
					<div id="collapseOne" class="panel-collapse collapse">
						<div class="panel-body">
							<div class="list-group">
								<a href="#" class="list-group-item">HTML</a>
								<a href="#" class="list-group-item">JS</a>
								<a href="#" class="list-group-item">BS</a>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 文学类 </a>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse in">
						<div class="panel-body">
							<div class="list-group">
								<a href="#" class="list-group-item">三国演义</a>
								<a href="#" class="list-group-item">西游记</a>
								<a href="#" class="list-group-item">红楼梦</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer class="navbar-fixed-bottom label-info text-center">
			<p>
				Copyright  &copy;
				<abbr title="tarnna">hajiang</abbr>&trade; 2015 <span class="glyphicon glyphicon-copyright-mark"></span>
			</p>
		</footer>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
	</body>
</html>
